<template>
  <!-- 流程模型详情抽屉 -->
  <div class="flow-flowModel-detail">
    <el-drawer v-model="isShowDialog" size="80%" direction="ltr">
      <template #header>
        <h4>流程模型详情</h4>
      </template>
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" style="margin: 8px;">
        <el-tab-pane label="表单详情" name="0">
          <el-form ref="formRef" :model="formData" label-width="100px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="主键">{{ formData.id }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流程名称">{{ formData.name }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="表单类型">{{ proxy.getOptionValue(formData.flowType, flowTypeOptions,'value','label') }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流程表单类别">{{ formData.linkedFlowFormCate?formData.linkedFlowFormCate.name:'' }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流程描述">{{ formData.remark }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="业务表单类别">{{ proxy.getOptionValue(formData.flowBusinessCate, flowBusinessCateOptions,'value','label') }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="流程状态">{{ proxy.getOptionValue(formData.status, statusOptions,'value','label') }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建时间">{{ proxy.parseTime(formData.createdAt, '{y}-{m}-{d} {h}:{i}:{s}') }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="创建人">{{ formData.createdBy }}</el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="修改人">{{ formData.updatedBy }}</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="流程图" name="1">
          <ShowFlowDesign ref="showFlowCheckRef" />
        </el-tab-pane>
      </el-tabs>
    </el-drawer>
  </div>
</template>
<script lang="ts">
  import ShowFlowDesign from "/@/components/gFlow/showDesign.vue";
  import { reactive, toRefs, defineComponent,ref,getCurrentInstance,computed } from 'vue';
  import {
    getFlowModel,
  } from "/@/api/flow/flowModel";
  import {
    FlowModelInfoData,
    FlowModelEditState
  } from "/@/views/flow/flowModel/list/component/model"
  import {TabsPaneContext} from "element-plus";
  export default defineComponent({
    name:"ApiV1FlowFlowModelDetail",
    components:{
      ShowFlowDesign
    },
    props:{
      flowTypeOptions:{
        type:Array,
        default:()=>[]
      },
      flowFormCateOptions:{
        type:Array,
        default:()=>[]
      },
      flowBusinessCateOptions:{
        type:Array,
        default:()=>[]
      },
      statusOptions:{
        type:Array,
        default:()=>[]
      },
    },
    setup(props,{emit}) {
      const showFlowCheckRef = ref()
      const activeName = ref('0')
      const handleClick = (tab: TabsPaneContext) => {
        if(tab.index=="1"){
          showFlowCheckRef.value.showDesign({flowId:state.formData.id,processId:''})
        }
      }
      const {proxy} = <any>getCurrentInstance()
      const formRef = ref<HTMLElement | null>(null);
      const menuRef = ref();
      const state = reactive<FlowModelEditState>({
        loading:false,
        isShowDialog: false,
        formData: {
          id: undefined,
          name: undefined,
          flowType: undefined ,
          flowFormCate: undefined,
          linkedFlowFormCate:{id:undefined,name:undefined },
          remark: undefined,
          flowBusinessCate: undefined,
          sort: undefined,
          status: undefined ,
          createdAt: undefined,
          updatedAt: undefined,
          deletedAt: undefined,
          createdBy: undefined,
          updatedBy: undefined,
          linkedFlowModelFlowForm: {
            id:undefined,    // 主键
            name:undefined,    // 表单名
          },
        },
        // 表单校验
        rules: {
          id : [
              { required: true, message: "主键不能为空", trigger: "blur" }
          ],
          name : [
              { required: true, message: "流程名称不能为空", trigger: "blur" }
          ],
          status : [
              { required: true, message: "流程状态不能为空", trigger: "blur" }
          ],
        }
      });
        // 打开弹窗
        const openDialog = (row?: FlowModelInfoData) => {
          resetForm();
          if(row) {
            getFlowModel(row.id!).then((res:any)=>{
              const data = res.data;
              data.createdBy = data.createdUser?.userNickname
              data.updatedBy = data.updatedUser?.userNickname
              state.formData = data;
            })
          }
          state.isShowDialog = true;
        };
        // 关闭弹窗
        const closeDialog = () => {
          state.isShowDialog = false;
        };
        // 取消
        const onCancel = () => {
          closeDialog();
        };
        const resetForm = ()=>{
          state.formData = {
            id: undefined,
            name: undefined,
            flowType: undefined ,
            flowFormCate: undefined,
            linkedFlowFormCate:{id:undefined,name:undefined },
            remark: undefined,
            flowBusinessCate: undefined,
            sort: undefined,
            status: undefined ,
            createdAt: undefined,
            updatedAt: undefined,
            deletedAt: undefined,
            createdBy: undefined,
            updatedBy: undefined,
            linkedFlowModelFlowForm: {
              id:undefined,    // 主键
              name:undefined,    // 表单名
            },
          }
          activeName.value = '0'
        };
        //关联flow_form表选项
        const getFlowFormItemsFlowFormCate = () => {
          emit("getFlowFormItemsFlowFormCate")
        }
        const getFlowFormCateOp = computed(()=>{
          getFlowFormItemsFlowFormCate()
          return props.flowFormCateOptions
        })
        return {
          proxy,
          openDialog,
          closeDialog,
          onCancel,
          menuRef,
          formRef,
          getFlowFormItemsFlowFormCate,
          getFlowFormCateOp,
          showFlowCheckRef,
          activeName,
          handleClick,
          ...toRefs(state),
        };
      }
  })
</script>
<style scoped>
  .flow-flowModel-detail :deep(.el-form-item--large .el-form-item__label){
    font-weight: bolder;
  }
  .pic-block{
    margin-right: 8px;
  }
  .file-block{
    width: 100%;
    border: 1px solid var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    margin-bottom: 5px;
    padding: 3px 6px;
  }
  .ml-2{margin-right: 5px;}
</style>
